<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员-用户信息</title>
    <link rel="icon" href="/image/favicon.ico" type="image/x-icon"/>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .navbar {
            overflow: hidden;
            background-color: #f8f9fa;
            /* 浅蓝色背景 */
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            margin-bottom: 0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            /* 轻微的阴影效果 */
        }

        .navbar a {
            float: left;
            display: block;
            color: #343a40;
            /* 深蓝色字体 */
            text-align: center;
            padding: 14px 20px;
            /* 调整内边距 */
            text-decoration: none;
            font-weight: bold;
            /* 字体加粗 */
            transition: background-color 0.3s, color 0.3s;
            /* 悬停效果的过渡 */
        }

        .navbar a:hover,
        .navbar .active {
            background-color: #e9ecef;
            /* 鼠标悬停或激活项的背景色 */
            color: #495057;
            /* 鼠标悬停或激活项的字体色 */
        }

        .navbar .logo {
            float: left;
            font-size: 24px;
            padding: 10px 20px;
            /* 调整内边距 */
            color: #343a40;
            /* 深蓝色字体 */
            font-weight: bold;
            /* 字体加粗 */
        }

        .navbar a.user {
            float: right;
        }

        /* 导航栏样式保持不变 */

        /* 侧边导航栏样式 */
        .sidenav {
            height: 100%;
            width: 200px;
            position: fixed;
            z-index: 1000;
            top: 0;
            left: 0;
            background-color: #f8f9fa;
            /* 浅蓝色背景 */
            overflow-x: hidden;
            padding-top: 20px;
        }

        .sidenav a {
            padding: 10px 15px;
            text-decoration: none;
            font-size: 20px;
            color: #343a40;
            /* 深蓝色字体 */
            display: block;
            transition: background-color 0.3s, color 0.3s;
            /* 悬停效果的过渡 */
        }

        .sidenav a:hover {
            background-color: #e9ecef;
            /* 鼠标悬停时的背景色 */
            color: #495057;
            /* 鼠标悬停时的字体色 */
        }

        /* 页面内容样式 */
        #app {
            margin: 80px 20px 20px;
            margin-left: 220px;
        }

        /* 表格样式 */
        table {
            border-collapse: collapse;
            width: 100%;
            margin: 20px 0;
            /* 表格与上下内容的间距 */
        }

        th,
        td {
            border: 1px solid #ddd;
            /* 灰色边框 */
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #e9ecef;
            /* 浅灰色背景 */
            color: #343a40;
            /* 深蓝色字体 */
        }

        tr:nth-child(even) {
            background-color: #f8f9fa;
            /* 浅蓝色背景 */
        }

        /* 表格行悬停效果 */
        tr:hover {
            background-color: #dde2e6;
            /* 鼠标悬停时的行背景色 */
        }
    </style>
</head>

<body>

    <div class="sidenav">
        <br><br><br>
        <a href="./管理员-用户信息.html">用户信息</a>
        <a href="./管理员-招聘信息.html">招聘信息</a>
        <a href="./管理员-公司信息.html">公司信息</a>
        <a href="./管理员-岗位信息.html">岗位信息</a>
    </div>
    <div class="navbar">
        <div class="logo">聘途</div>
        <a href="管理员登陆.html" class="user">退出登录</a>
    </div>

    <div id="app">
        <table>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>名称</th>
                <th>密码</th>
                <th>学历</th>
                <th>性别</th>
                <th>电话</th>
                <th>简历</th>
                <th>操作</th> <!-- 添加操作列 -->
            </tr>
            <tr v-for="user in userList" :key="user.sid">
                <td>{{ user.sid }}</td>
                <td>{{ user.susername }}</td>
                <td>{{ user.sname }}</td>
                <td>{{ user.spassword }}</td>
                <td>{{ user.sedu }}</td>
                <td>{{ user.sgender }}</td>
                <td>{{ user.sphone }}</td>
                <td>{{ user.sinfo }}</td>
                <td>
                    <button @click="deleteUser(user.sid)">删除</button>
                </td>
            </tr>
        </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList: []
            },
            created() {
                this.getUserList();
            },
            methods: {
                getUserList() {
                    axios.get('http://localhost:8080/hqdx/manager/showSeeker')
                        .then(response => {
                            this.userList = response.data.data.items;
                        })
                        .catch(error => {
                            console.log(error);
                        });
                },
                deleteUser(sid) {
                    const confirmDelete = confirm('确定要删除这个用户吗?');
                    if (confirmDelete) {
                        let data = new FormData();
                        data.append("sid", sid);
                        // 这表示将用户的 sid（用户ID）作为键值对添加到 FormData 对象中，键是 
                        // "sid"，值是 sid 变量的值。这样，构建的 FormData 可以在发送 POST 
                        // 请求时被服务器识别为一个字
                        axios.post('http://localhost:8080/hqdx/manager/deleteSeeker', data) // 带上用户ID  
                            .then(response => {
                                this.getUserList();
                                console.log('用户已删除');
                            })
                            .catch(error => {
                                console.log('删除失败:', error);
                            });
                    }
                }

            }
        });
    </script>

</body>

</html>